<template>
  <editor-layout class="edit"
                 @ok="handleOk"
                 v-on="$listeners"
                 v-loading="loading"
                 :loading="saveLoading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="panel-top">
      <el-form class="customForm" size="small" label-width="60px">
        <div class="inline"></div>
        <div class="inline">
          <el-form-item label="资源名称">
            <el-input v-model="model.name" placeholder="请输入资源名称" clearable/>
          </el-form-item>
        </div>
        <div class="inline">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="info" @click="onUpload">上传</el-button>
        </div>
      </el-form>
    </div>
    <div class="panel-tags">
      <group-tags :data="groupList" :closeable="false" @select="onSelect" v-model="model.groupId" @add="onAdd"
                  @addOk="onAddOk"/>
    </div>
    <div class="panel-main">
      <el-row :gutter="20">
        <el-col :span="4" v-for="item in imglist" :key="item.id">
          <div class="img-box" :class="{selected: item.id === selectedId}" @click="onImgClick(item)">
            <el-image :src="item.url" fit="cover"/>
          </div>
          <div class="img-txt">{{ item.name }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="panel-page">
      <el-pagination
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size.sync="page.limit"
          :current-page.sync="page.page">
      </el-pagination>
    </div>

    <simple-dialog2 v-bind.sync="dialog" theme="dark" @on-ok="onDialogOk"/>
  </editor-layout>
</template>

<script>
import groupTags from "@/components/report/image/group-tags";
import {postImagegroupListAll, postImagegroupSave} from '@/api/image-group'
import {postImageList} from "@/api/image";
import dialogMixin from "@/components/common/dialog/dialog-mixin";
import tmImgPanelUpload from './tm-img-panel-upload'

const type = 'image'

export default {
  name: 'tm-img-panel',
  cnName: '图片选择弹窗',
  mixins: [dialogMixin],
  components: {
    groupTags
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      model: {
        name: '',
        groupId: ''
      },
      groupList: [],
      imglist: [],
      page: {
        total: 0,
        page: 1,
        limit: 12
      },
      selectedId: '',
      selectedUrl: ''
    }
  },
  methods: {
    async init() {
      const res = await postImagegroupListAll({type})
      const list = res || []
      this.groupList = list.map(o => {
        return {
          label: o.name,
          value: o.id
        }
      })

      this.model.groupId = res[0].id

      await this.load()
    },
    reload() {
      this.onSearch()
    },
    onSearch() {
      this.page.page = 1
      this.load()
    },
    async load() {
      this.selectedId = ''
      this.selectedUrl = ''
      this.loading = true
      const res = await postImageList({...this.page, ...this.model})
      this.loading = false

      this.page.total = res.totalCount
      const list = res.list || []
      this.imglist = list
    },
    onSelect() {
      this.onSearch()
    },
    onAdd() {
    },
    onAddOk(name) {
      if (!name) return

      postImagegroupSave({name, type}).then(res => {
        this.init()
      })
    },
    onImgClick(item) {
      this.selectedId = item.id
      this.selectedUrl = item.url
    },
    handleOk() {
      if (!this.selectedId) {
        this.$message.warning('请先选择资源!')
        return
      }

      this.$emit('on-ok', this.selectedUrl)
    },
    onUpload(evt) {
      const origin = {
        x: evt.pageX,
        y: evt.pageY
      }
      this.setDialog({
        title: '添加图片',
        width: '600px',
        origin: origin,
        comp: tmImgPanelUpload,
        props: {
          groupId: this.model.groupId
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.inline {
  display: inline-block;
  margin-right: 10px;
}

.panel-main {
  padding: 10px;
  margin: 10px 0 20px;
}

.panel-page {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
}

.img-box {
  height: 150px;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s ease-in-out;
  overflow: hidden;

  &.selected {
    border-color: #0c76e5;
    box-shadow: rgb(69, 130, 230) 0px 0px 4px 2px;
  }
}

.img-txt {
  padding: 5px;
  font-size: 12px;
}

/deep/ .group-tags {
  color: rgba(255, 255, 255, .7);
  border-bottom: 1px solid rgb(68, 68, 68);
  padding-bottom: 8px;

  &-item {
    &.selected {
      background-color: transparent;
      color: #1890ff;
    }
  }
}

/deep/ .el-image {
  max-height: 100%;
  width: 100%;
  transition: all .3s ease-in-out;

  &:hover {
    transform: scale(1);
  }

  &__error, &__placeholder {
    background-color: rgba(0, 0, 0, .1);
  }
}

/deep/ .el-pagination {
  li, button:disabled {
    background-color: transparent;
  }

}
</style>
